﻿
@{
    Layout = null;
}

<style>
    .flayout_o_imgs .imgBox {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        margin: auto;
    }

    .imgBox .w_56proImg {
        width: 94%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        margin: auto;
    }

    .w_56close {
        position: absolute;
        width: 40%;
        right: 0;
        top: -6px;
    }

    .w_56li {
        position: relative;
        float: left;
        width: 20%;
    }

    .select_div{padding:10px;}
	.select_div label{background:url(/Content/images/w_09.png) no-repeat left center;background-size:18px;padding-left:25px;}
	.select_div label.on{background:url(/Content/images/w_09a.png) no-repeat left center;background-size:18px;}
</style>
<div class="w_shopcar w_submitOrder" ng-controller="ReturnGoodsCtrl">
    <div >
        <div class="select_div">
            <label for="th" ng-class="{true:'on',false:''}[Model.ReturnType==0]" ng-click="choseType(0)"><input hidden id="th" type="radio" name="thok">退货</label>
            <label for="tk"  ng-class="{true:'on',false:''}[Model.ReturnType==1]" ng-click="choseType(1)"><input hidden id="tk" type="radio" name="thok">换货</label>
        </div>

        <div class="flayout_o">
            <textarea class="flayout_o_textarea" placeholder="退货原因" ng-model="Model.Reason"></textarea>
            <div class="flayout_o_imgs">
                <div style="position:relative;float:left;width:20%;height:20%;padding:2%;" ng-repeat="imgUrl in Model.ImgList track by $index">
                    <img src="/Content/images/pro_detail_03.png"
                         style="position: absolute; width: 30%; right: 0px; top: 0px;"
                         ng-click="Model.ImgList.splice($index,1)">
                    <img ng-src="{{ImgHostUrl + imgUrl}}" class="w_56proImg" style="max-width: 100%; max-height: 100%" onerror="javascript: this.src = '/Content/images/up_img.png';" />
                </div>

                <div style="position:relative;float:left;width:20%;height:20%;padding:2%;" ng-click="selectImageSub()" ng-show="Model.ImgList.length<5">
                    <img src="/Content/images/up_img.png" style="max-width: 100%; max-height: 100%" alt="上传图片">
                </div>
                <div style="clear:both;"></div>
                @*<span ng-show="comment.ImgUrlList.length<1" class="o_upimg_txt">上传评论图片</span>*@
            </div>
        </div>
    </div>
    <input id="fileInput" class="ng-hide" type="file" nv-file-select="" uploader="uploader" />
    <div class="o_submitDiv"><input type="button" name="" value="提交" class="o_submit" ng-click="ReturnSubmit()"></div>

</div>

<script type="text/javascript">
    App.controller('ReturnGoodsCtrl', ["$scope", "$state", "$http", "$stateParams", "FileUploader", '$rootScope',
        function ($scope, $state, $http, $stateParams, FileUploader, $rootScope) {

            $scope.Model = {};
            $scope.Model.ReturnType = 0;
            $scope.Model.ImgList = [];
            $scope.Model.OrderDetailId = $stateParams.id;

            $scope.ReturnSubmit = function () {
                $http.post("/Order/SaveReturnGoods", { model: $scope.Model, imgList: $scope.Model.ImgList }).then(function (response) {
                    if (response.data.isSuccess) {
                        layer.msg("提交成功");
                        $state.go('user.order', { status: 4 });
                    } else {
                        layer.msg(response.data.msg);
                    }

                });
            }

            $scope.choseType = function (type)
            {
                $scope.Model.ReturnType = type;
            }


            //-------------图片选择相关
            $scope.selectImageSub = function () {
                $("#fileInput").click();
            }
            var tt = function () {
                $rootScope.WxShare($rootScope.pageTitle(), '优品三悦', location.href, $rootScope.LogoUrl);
            }

            setTimeout(tt, 1000)
            var handleFileSelect = function (evt) {
                var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
                if (!evt.currentTarget.files[0] || ! /image\/\w+/.test(evt.currentTarget.files[0].type)) {
                    layer.msg("请选择图像文件");
                    return false;
                }
                if (file.size > 1 * 1024 * 1024) {
                    layer.msg("图片大小不能大于1MB");
                    $scope.uploadSelectFile = null;
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        //if ($scope.CurrentComment.ImgUrlList.length < 5) {
                        //    $scope.CurrentComment.ImgUrlList.push(evt.target.result);
                        //}
                    });
                };
                if (file)
                    reader.readAsDataURL(file);
            };

            angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=Comment'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return true;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {

                if ($scope.uploadSelectFile && /image\/\w+/.test($scope.uploadSelectFile.type) && $scope.Model.ImgList.length < 5) {
                    fileItem.upload();
                }

                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {
                if (!$scope.Model.ImgList) {
                    $scope.Model.ImgList = [];
                }
                $scope.Model.ImgList.push(response[0]);
                console.log($scope.Model.ImgList)
                $("#fileInput").val("");
                //  console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };


        }]);
</script>
